<template>
  <div>
    <el-date-picker
      v-model="timevalue"
      :picker-options="pickerOptions"
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm:ss"
      :default-time="['00:00:00', '23:59:59']"
      placeholder="选择日期时间"
      align="right"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @blur="handleBlur"
    />
  </div>
</template>
<script>
export default {
  name: "d2DateTimePicker",
  model: {
    event: "change",
  },
  props: {
    timevalue1: "",
  },
  data() {
    return {
      timevalue: "",
      pickerOptions: {
        // 设置不能选择的日期
        onPick: ({ maxDate, minDate }) => {
          this.timevalue = minDate.getTime();
          if (maxDate) {
            this.timevalue = "";
          }
        },
        disabledDate: (time) => {
          let choiceDateTime = new Date(this.timevalue).getTime();
          const minTime = new Date(choiceDateTime).setMonth(
            new Date(choiceDateTime).getMonth() - 2
          );
          const maxTime = new Date(choiceDateTime).setMonth(
            new Date(choiceDateTime).getMonth() + 2
          );
          const min = minTime;
          const newDate =
            new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1;
          const max = newDate < maxTime ? newDate : maxTime;
          //如果已经选中一个日期 则 返回 该日期前后一个月时间可选
          if (this.timevalue) {
            return time.getTime() < min || time.getTime() > max;
          }
          //若一个日期也没选中 则 返回 当前日期以前日期可选
          return time.getTime() > newDate;
        },
      },
    };
  },
  created() {},
  watch: {
    timevalue: {
      immediate: true,
      handler(newVal) {
        this.$emit("change", newVal);
      },
    },
  },
  methods: {
    handleBlur() {
      this.$emit("handleBlur", this.timevalue);
    },
  },
};
</script>

<style scoped lang="scss"></style>
